<template>
      <div id="myExam">
            <div class="title"></div>
<div id="practice-setting">


        <div class="header">
            <div>
                <h1>练习设置</h1>
                <div class="course-info">
                    <i class="fas fa-book"></i> 当前课程：{{course}}
                </div>
            </div>
            <div>
                <el-tag type="info" size="large">
                    <i class="fas fa-database"></i> 题库总量：{{questionTotal}}题
                </el-tag>
            </div>
        </div>

            <!-- //模式选择 -->
        <div class="card-container">
              <div class="mode-card" :class="{active: mode === 'default'}" @click="mode = 'default'">
                <div class="icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>默认模式</h3>
                <p>系统推荐的练习模式：20道选择题、15道判断题、15道填空题</p>
                <el-tag type="success">快速开始</el-tag>
            </div>

            <div class="mode-card" :class="{active: mode === 'preset'}" @click="mode = 'preset'">
                <div class="icon">
                    <i class="fas fa-sliders-h"></i>
                </div>
                <h3>预设模式</h3>
                <p>自定义练习的题型、数量、难度和章节，满足个性化学习需求</p>
                <el-tag type="primary">高度自定义</el-tag>
            </div>
        </div>
        
        <div class="settings-panel" v-if="mode === 'preset'">
            <h2><i class="fas fa-cog"></i> 自定义练习设置</h2>
            
            <div class="setting-group">
                <h3><i class="fas fa-list"></i> 题型设置</h3>
                <div class="question-types">
                    <div class="type-card">
                        <h4><i class="fas fa-check-circle"></i> 判断题</h4>
                        <el-slider v-model="settings.judgeCount" :min="0" :max="judgeCount" show-input></el-slider>
                        <div class="info">已选择: {{settings.judgeCount}} 题</div>
                    </div>
                    
                    <div class="type-card">
                        <h4><i class="fas fa-check-square"></i> 选择题</h4>
                        <el-slider v-model="settings.multiCount" :min="0" :max="multiCount" show-input></el-slider>
                        <div class="info">已选择: {{settings.multiCount}} 题</div>
                    </div>
                    
                    <div class="type-card">
                        <h4><i class="fas fa-edit"></i> 填空题</h4>
                        <el-slider v-model="settings.fillCount" :min="0" :max="fillCount" show-input></el-slider>
                        <div class="info">已选择: {{settings.fillCount}} 题</div>
                    </div>
                </div>
            </div>
            
            <div class="setting-group">
                <h3><i class="fas fa-chart-line"></i> 难度设置</h3>
                <div class="difficulty-section">
                    <div class="difficulty-option" 
                         :class="{active: settings.difficulty === 'random'}" 
                         @click="settings.difficulty = 'random'">
                        <h4><i class="fas fa-random"></i> 随机难度</h4>
                        <p>系统从题库中随机抽取题目，包含各种难度级别</p>
                    </div>
                    
                    <div class="difficulty-option" 
                         :class="{active: settings.difficulty === 'easy'}" 
                         @click="settings.difficulty = 'easy'">
                        <h4><i class="fas fa-seedling"></i> 简单</h4>
                        <p>适合基础练习，题目难度较低，巩固基础知识</p>
                    </div>
                    
                    <div class="difficulty-option" 
                         :class="{active: settings.difficulty === 'medium'}" 
                         @click="settings.difficulty = 'medium'">
                        <h4><i class="fas fa-mountain"></i> 中等</h4>
                        <p>适合能力提升，题目难度适中，挑战理解能力</p>
                    </div>
                    
                    <div class="difficulty-option" 
                         :class="{active: settings.difficulty === 'hard'}" 
                         @click="settings.difficulty = 'hard'">
                        <h4><i class="fas fa-fire"></i> 困难</h4>
                        <p>适合高阶挑战，题目难度较高，检验综合能力</p>
                    </div>
                </div>
            </div>
            
            <div class="setting-group">
                <h3><i class="fas fa-bookmark"></i> 章节设置</h3>
                <el-select v-model="settings.chapters" multiple placeholder="请选择章节 (提示：不选择章节则默认使用全部章节)" class="chapter-select">
                    <el-option
                        v-for="chapter in chapters"
                        :key="chapter.id"
                        :label="chapter.name"
                        :value="chapter.id">
                    </el-option>
                </el-select>
                <p class="tip">提示：不选择章节则默认使用全部章节</p>
            </div>
        </div>
        
        <div class="settings-panel" v-else-if="mode === 'default'">
            <h2><i class="fas fa-bolt"></i> 默认练习模式</h2>
            <div class="setting-group">
                <h3><i class="fas fa-info-circle"></i> 模式说明</h3>
                <p>系统已为您配置了推荐的练习模式：</p>
                
                <div class="question-types">
                    <div class="type-card">
                        <h4><i class="fas fa-check-circle"></i> 判断题</h4>
                        <div class="value">15 题</div>
                    </div>
                    
                    <div class="type-card">
                        <h4><i class="fas fa-check-square"></i> 选择题</h4>
                        <div class="value">20 题</div>
                    </div>
                    
                    <div class="type-card">
                        <h4><i class="fas fa-edit"></i> 填空题</h4>
                        <div class="value">15 题</div>
                    </div>
                </div>
                
                <p>难度：<el-tag type="info">随机难度</el-tag></p>
                <p>章节：<el-tag type="info">全部章节</el-tag></p>
            </div>
        </div>
        
  
        
        <div class="action-bar">
            <el-button type="default" @click="resetSettings">
                <i class="fas fa-redo"></i> 重置设置
            </el-button>
            <el-button type="primary" @click="startPractice">
                <i class="fas fa-play-circle"></i> 开始练习
            </el-button>
        </div>
    </div>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';


const router = useRouter();
// 当前选择的练习模式
const mode = ref('default'); // 'preset', 'default'
// 预设模式的设置
//获取url查询参数
const route = useRoute();
const course = route.query.course;
const questionTotal = route.query.questionTotal;
const judgeCount= route.query.judgeCount
const multiCount= route.query.choiceCount
const fillCount= route.query.fillCount
const settings = ref({
    judgeCount: judgeCount>=15?15:judgeCount,
    multiCount: multiCount>=20?20:multiCount,
    fillCount: fillCount>=15?15:fillCount,
    difficulty: 'random', // 'random', 'easy', 'medium', 'hard'
    chapters: []
})
                
                // 章节数据
                const chapters = ref([
                    { id: 1, name: '第一章：计算机网络概述' },
                    { id: 2, name: '第二章：物理层' },
                    { id: 3, name: '第三章：数据链路层' },
                    { id: 4, name: '第四章：网络层' },
                    { id: 5, name: '第五章：传输层' },
                    { id: 6, name: '第六章：应用层' },
                    { id: 7, name: '第七章：网络安全' }
                ]);
                
                // 重置设置
                const resetSettings = () => {
                    if (mode.value === 'preset') {
                        settings.value.judgeCount = judgeCount>=15?15:judgeCount;
                        settings.value.multiCount = multiCount>=20?20:multiCount;
                        settings.value.fillCount = fillCount>=15?15:fillCount;
                        settings.value.difficulty = 'random';
                        settings.value.chapters = [];
                    } else if (mode.value === 'default') {
                        // 默认模式不需要重置
                    } 
                };
                
                // 开始练习
  const startPractice = () => {
    //这里可能还需要再次确认

     //跳转路由               
    //需要查询参数：选择题数量,判断题数量，填空题数量，难度，所属章节
    router.push({ path: '/practicing', 
    query: {      course: course,
                  judgeCount: settings.value.judgeCount,
                  multiCount: settings.value.multiCount,
                  fillCount: settings.value.fillCount,
                  level:settings.value.difficulty,
                  chapters: settings.value.chapters          
    } });


  };
                
</script>

<style lang="less" scoped>

#myExam  { 
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
}

#myExam .title {
  width: 100%;
  height: 70px;
  background-color: #e2e2e2;
}


 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        #practice-setting {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 28px;
        }
        
        .header .course-info {
            font-size: 16px;
            color: #7f8c8d;
        }
        
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .mode-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            padding: 25px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .mode-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        }
        
        .mode-card.active {
            border-color: #409eff;
            background-color: #f0f7ff;
        }
        
        .mode-card .icon {
            font-size: 36px;
            margin-bottom: 15px;
            color: #409eff;
        }
        
        .mode-card h3 {
            font-size: 20px;
            margin-bottom: 12px;
            color: #2c3e50;
        }
        
        .mode-card p {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .settings-panel {
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .settings-panel h2 {
            color: #2c3e50;
            margin-bottom: 25px;
            font-size: 22px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .setting-group {
            margin-bottom: 25px;
        }
        
        .setting-group h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #34495e;
            display: flex;
            align-items: center;
        }
        
        .setting-group h3 i {
            margin-right: 10px;
            color: #409eff;
        }
        
        .question-types {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .type-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e9ecef;
        }
        
        .type-card h4 {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .type-card h4 i {
            margin-right: 8px;
            color: #409eff;
        }
        
        .difficulty-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .difficulty-option {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e9ecef;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .difficulty-option:hover {
            background: #e6f7ff;
            border-color: #91d5ff;
        }
        
        .difficulty-option.active {
            background: #e6f7ff;
            border-color: #409eff;
        }
        
        .difficulty-option h4 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .difficulty-option h4 i {
            margin-right: 8px;
        }
        
        .chapter-select {
            width: 100%;
        }
        
        .action-bar {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .el-button--primary {
            background-color: #409eff;
            border-color: #409eff;
            padding: 12px 35px;
            font-size: 16px;
            border-radius: 8px;
        }
        
        .el-button--primary:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
        }
        
        .el-button--default {
            padding: 12px 35px;
            font-size: 16px;
            border-radius: 8px;
        }
        
        .stats-bar {
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            padding: 20px;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .stat-item {
            padding: 10px;
        }
        
        .stat-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #409eff;
        }
        
        .stat-item .label {
            font-size: 14px;
            color: #7f8c8d;
        }

        
        
        @media (max-width: 768px) {
            .card-container {
                grid-template-columns: 1fr;
            }
            
            .question-types, .difficulty-section {
                grid-template-columns: 1fr;
            }
        }
        
</style>